{% extends 'templates/base.html' %}
{% load static %}
{% block head %}
<link rel="stylesheet" href="{% static 'css/reservation.css' %}" media="all">
{% endblock %}
{% block  content%}
    <div class="wdyy">
		<!--标题开始-->
		  <div class="title warp">

		  	  <h3>我的预约</h3>

		  </div>

 <table class="layui-table">
    <colgroup>
      <col width="150">
      <col width="150">
      <col width="200">
      <col>
    </colgroup>
    <thead>
      <tr>
        <th style="width: 5%"><input type="checkbox" id="selectAll">全选</th>
        <th style="width: 1%">汽车</th>
        <th style="width: 9%">品牌</th>
        <th style="width: 19%">详情</th>
        <th style="width: 10%">报价</th>
        <th style="width: 8%">首付</th>
        <th style="width: 8%">操作</th>
      </tr>
    </thead>
    <tbody>
    {% for  reservation in reservation_list %}
        <tr>
            <td><input type="checkbox" class="item-checkbox" value="1" data-reservationid="{{ reservation.id }}"></td>
            <td><img src="/{{ reservation.img }}" width="100px" height="80px"></td>
            <td>
                <div style="font-size: 18px;margin-left: 23px">[{{ reservation.model }}]</div>
                <br>
                <div style="font-size: 20px;margin-left: 20px;">{{ reservation.cname }}</div>
            </td>
            <td>
                <span>车型：{{ reservation.type }}</span><br>
                <div style="margin-top: 10px"><span>厂商：{{ reservation.firm }}</span><span style="margin-left: 20px">级别：{{ reservation.rank }}</span>
                </div>
                <div style="margin-top: 10px"><span>续航：{{ reservation.endurance }}</span><span
                        style="margin-left: 20px">快充：{{ reservation.charge }}</span></div>
            </td>
            <td>
                ￥{{ reservation.oprice }}
            </td>
            <td>￥{{ reservation.price }}</td>
            <td><p>
                <a href="javascript:;" style="font-size: 15px;" class="delBtn"
                   reservationid="{{ reservation.cars_id }}">删除预约</a>
            </p><br>
                <p>
                    <a href="javascript:;" style="font-size: 15px;" class="pay"
                       reservationid="{{ reservation.cars_id }}">立即购买</a>
                </p></td>
        </tr>
    {% endfor %}
    </tbody>
  </table>



		<!--商品详情展示结束-->
    <section class="my_model" style="display: none;">
        <p class="title">删除宝贝</p>
        <p>您确认要删除该宝贝吗？</p>
        <div class="opBtn1" style="margin-top: 50px">
            <a href="javascript:;" class="dialog-sure">确定</a>
            <a href="javascript:;" class="dialog-close">关闭</a>
        </div>
    </section>

		<!--结算开始-->

	   <div class="balance warp">

	   	   <ul class="balance_ul1">

	   	   	<li>
               <li>已经选择<span class="selected-count" style="margin-left: 10px">0</span>&nbsp&nbsp个预约</li>

	   	   	</li>
	   	   	<li style="background-color: #bb2d3b; margin-left: 742px;width: 100px;height: 50px;text-align: center;font-size: 20px"><a href="javascript:; " id="deleteBtn" style="color: white">删除</a></li>

	   	   </ul>





       </div>

    </div>
{% endblock %}
{% block script %}
    <script>
    //支付
    layui.use(['layer', 'jquery'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;

        $('.pay').on('click', function () {
             // 获取reservationid
            var reservationId = $(this).attr('reservationid');
            $.ajax({
                url: "/reservation/purchase/",    // 请求的url地址
                type: "POST",   // 请求方式
                data:{
                    'reservation_id': reservationId, // 确保后端接收的字段名与这里一致
                    'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),},
                success: function (response) {
                    if (response.url) {
                        window.location.href = response.url;
                    } else {
                        layer.msg('未获取到重定向地址');
                    }
                },
                error: function () {
                    layer.msg('服务器异常');

                }
            });
        });
    });

        $(document).ready(function () {
            // 为删除按钮添加点击事件监听器
            $('.delBtn').click(function (e) {
                e.preventDefault(); // 阻止链接的默认行为

                var reservationId = $(this).attr('reservationid');
                // 显示模态框
                $('.my_model').show();

                // 为模态框的确定按钮添加点击事件监听器
                $('.dialog-sure').click(function (e) {
                    e.preventDefault();
                     // 获取reservationid

                    // 发送Ajax请求
                    $.ajax({
                        url: '/reservation/delete/', // 替换为你的删除URL
                        type: 'POST',
                        data: {
                            'reservation_id': reservationId, // 确保后端接收的字段名与这里一致
                            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(), // 发送CSRF token
                        },
                        success: function (response) {
                            if (response.message) {
                                alert(response.message); // 显示后端返回的消息
                                // 刷新页面
                                location.reload();
                            } else {
                                alert('删除成功！'); // 或者使用默认消息
                                // 刷新页面
                                location.reload();
                            }
                        },
                        error: function (xhr, status, error) {
                            // 处理错误响应
                            alert('删除失败：' + xhr.responseText);
                        }
                    });

                    // 防止点击事件冒泡
                    return false;
                });

                // 为模态框的关闭按钮添加点击事件监听器
                $('.dialog-close').click(function (e) {
                    e.preventDefault();
                    $('.my_model').hide(); // 隐藏模态框
                });
            });
        });

        $(document).ready(function () {
            // 监听复选框变化
            $('.item-checkbox').change(function () {
                var totalCount = 0;

                // 遍历所有复选框
                $('.item-checkbox:checked').each(function () {
                    // 累加选中商品的数量
                    totalCount += parseInt($(this).val(), 10);

                });

                // 更新显示
                $('.selected-count').text(totalCount);

                // 如果没有选中任何商品，可以禁用结算按钮（可选）
                if (totalCount === 0) {
                    $('.butt').prop('disabled', true);
                } else {
                    $('.butt').prop('disabled', false);
                }
            });

            // 假设有删除功能（这里简化为点击某个按钮或链接删除所有选中项，并重新计算）
            $('#deleteSelected').click(function () {
                $('.item-checkbox:checked').closest('li').remove(); // 假设你想直接删除DOM元素
                // 然后重新计算总数和总价（上面的change事件会处理这个）
                $('.item-checkbox').trigger('change'); // 触发change事件以重新计算
            });
        });


    $(document).ready(function () {
        // 绑定全选框的点击事件
        $('#selectAll').click(function () {
            $('.item-checkbox:not(#selectAll)').prop('checked', $(this).is(':checked'));
            updateSelectedCount();
        });

        // 绑定列表复选框的点击事件，以更新全选框的选中状态
        $('.item-checkbox:not(#selectAll)').click(function () {
            $('#selectAll').prop('checked', $('.item-checkbox:not(#selectAll)').length === $('.item-checkbox:not(#selectAll):checked').length);
            updateSelectedCount();
        });

        // 更新显示选中商品数量的函数
        function updateSelectedCount() {
            var totalCount = $('.item-checkbox:checked:not(#selectAll)').length; // 计数被选中的复选框数量
            $('.selected-count').text(totalCount);
        }

        // 绑定删除按钮的点击事件
        $('#deleteBtn').click(function () {
            var selectedReservationIds = $('.item-checkbox:checked:not(#selectAll)').map(function () {
                return $(this).data('reservationid');
            }).get();

            if (selectedReservationIds.length === 0) {
                alert('请至少选择一个商品进行删除。');
                return;
            }

            // 发送请求（示例）
            console.log('将删除以下预订ID：', selectedReservationIds);
            // 这里可以添加AJAX请求或其他逻辑来处理删除操作
            // 发送请求到服务器进行删除操作
            $.ajax({
                url: '/reservation/dall/', // 替换为您的删除URL
                type: 'POST', // 或者根据您的API要求使用'DELETE'
                beforeSend: function (xhr, settings) {
                    var csrftoken = $('input[name=csrfmiddlewaretoken]').val();
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                data: JSON.stringify(selectedReservationIds), // 直接传递数组
                // 将ID数组转换为JSON字符串
                success: function (response) {
                    // 处理服务器的响应
                    alert(response.message);
                    // 可以在这里添加额外的逻辑，比如清空复选框、更新页面等
                    location.reload()
                },
                error: function () {
                    // 处理请求失败的情况
                    alert('删除失败，请稍后再试。');
                }
            });
        });
    });

    </script>

{% endblock %}